<template>
    <n-flex vertical>


        <n-form class="my-4" label-placement="left" :label-width="160">

            <FormItemComponent title="预测场景：" tips="请输入策略的描述信息">
                    <n-select  class="w-96" v-model:value="analyzer_form.scenario_id" :options="options.scenario_list"
                    placeholder="请选择回测的场景" />
                
            </FormItemComponent>
            <FormItemComponent title="预测股票：" tips="请输入策略的描述信息">
                <n-select class="w-96" v-model:value="analyzer_form.stock_id" :options="options.stock_list"
                    placeholder="请选择回测的场景" />
            </FormItemComponent>

            <FormItemComponent title="开盘价：" tips="请输入策略的描述信息">
                <n-input-number v-model:value="analyzer_form.open" class="w-96" placeholder="请输入初始金额，单位：元" clearable
                    :precision="2">
                    <template #suffix>
                        元
                    </template>
                </n-input-number>
            </FormItemComponent>
            <FormItemComponent title="收盘价：" tips="请输入策略的描述信息">
                <n-input-number v-model:value="analyzer_form.close" class="w-96" placeholder="请输入初始金额，单位：元" clearable
                    :precision="2">

                    <template #suffix>
                        元
                    </template>
                </n-input-number>
            </FormItemComponent>
            <FormItemComponent title="最高价：" tips="请输入策略的描述信息">
                <n-input-number v-model:value="analyzer_form.high" class="w-96" placeholder="请输入初始金额，单位：元" clearable
                    :precision="2">

                    <template #suffix>
                        元
                    </template>
                </n-input-number>
            </FormItemComponent>
            <FormItemComponent title="最低价：" tips="请输入策略的描述信息">
                <n-input-number v-model:value="analyzer_form.low" class="w-96" placeholder="请输入初始金额，单位：元" clearable
                    :precision="2">

                    <template #suffix>
                        元
                    </template>
                </n-input-number>
            </FormItemComponent>
            <FormItemComponent v-for="i in analyzer_form.item_attribute_list" :key="i.id" :title="i.label + '：'"
                tips="自定义属性">
                <n-input-number v-model:value="i.value" class="w-96" placeholder="请输入初始金额，单位：元" clearable
                    :precision="4">
                </n-input-number>
            </FormItemComponent>
            <n-flex class="w-full" justify="center">
                <n-button @click="submitAnalyzer()" type="primary">
                    提交
                </n-button>
            </n-flex>
        </n-form>

    </n-flex>
</template>

<style scoped>
.hvr-fade:hover {
    background-color: rgb(71, 131, 215)
}
</style>

<script setup>
import FormItemComponent from '@/components/FormItemComponent.vue';
import { ref, onMounted, watch } from 'vue';
// r"该股票((?:开盘价|收盘价|最高价|最低价))前(\d+)日((?:上涨|下跌))超过(\d+\.\d+)%"
import { ArchiveOutline } from '@vicons/ionicons5';
import { useScenarioStore } from '@/stores/scenarioStore';
const scenarioStore = useScenarioStore();
import { useStockStore } from '@/stores/stockStore';
const stockStore = useStockStore();
import { useAnalyzerStore } from '@/stores/analyzerStore';
const analyzerStore = useAnalyzerStore();

import { useRouter } from 'vue-router';
const router = useRouter();

const options = ref({
    scenario_list: [],
    stock_list: []
})

const analyzer_form = ref({
    scenario_id: null,
    stock_id: null,
    open: null,
    close: null,
    high: null,
    low: null,
    item_attribute_list: []
})
watch(() => analyzer_form.value.scenario_id, async (new_value, old_value) => {
    await scenarioStore.getScenarioById(new_value);
    analyzer_form.value.item_attribute_list.splice(0, analyzer_form.value.item_attribute_list.length);
    for (let i of scenarioStore.current_scenario.attribute_list) {
        analyzer_form.value.item_attribute_list.push({
            index: i.index,
            label: i.label,
            value: null
        })
    }
})

onMounted(async () => {
    await scenarioStore.getScenarioList();
    await stockStore.getStockList();
    initOptions();
})
const initOptions = () => {
    let temp_scenario_list = JSON.parse(JSON.stringify(scenarioStore.scenario_list));
    for (let i of temp_scenario_list) {
        options.value.scenario_list.push({
            label: i.name,
            value: i.id
        })
    }
    for (let i of stockStore.stock_list) {
        options.value.stock_list.push({
            label: i.name,
            value: i.id
        })
    }
}
const submitAnalyzer = async()=>{
   await  analyzerStore.analyzerStock(analyzer_form.value);
    router.replace({
            path: "/analyzer/result",
        })
}

</script>